BI.Engine(function(engineContext){
	
	engineContext.preloadImages({
		images: {
			player : {src:'./images/player.png', fetchData: true},
			sprite : {src:'./images/sprite.jpg', fetchData: true},
			ground : {src:'./images/backgrounds/ground.png', fetchData: false},
			foreground : {src:'./images/backgrounds/foreground.png', fetchData: false},
			background1 : {src:'./images/backgrounds/background1.png', fetchData: false},
			background2 : {src:'./images/backgrounds/background2.png', fetchData: false},
			background3 : {src:'./images/backgrounds/background3.png', fetchData: false}
		}, 
		onProgress: function(progress){
			console.log(progress);
		},
		onSuccess: function(preloadedImages){
			var cameraWidth = 900;
			var cameraHeight = 317;
			var sceneWidth = 1500;
			var sceneHeight = 317;
			var canvasContiner = 'gamescreen';
			
			var canvas = new Element('canvas', {width: cameraWidth, height: cameraHeight});
			var context = canvas.getContext('2d');
			
			$(canvasContiner).adopt(canvas);
			
			var layer = new BI.core.SceneLayer();
			
			layer.addSprite(new BI.sprite.CircleSprite(125, 100, 50, {
				fillColor: '#004400',
				onMouseOver: function(event){
					this.fillColor =  '#00cc00';
				},
				onMouseOut: function(event){
					this.fillColor =  '#004400';
				},
				onClick: function(event){
					this.fillColor =  '#00ff00';
				}
			}));

			
			layer.addSprite(new BI.sprite.ImageSprite(600, 50, preloadedImages.player, {
				onMouseOver: function(event){
					console.log("player onMouseOver");
				},
				onMouseOut: function(event){
					console.log("player onMouseOut");
				},
				onClick: function(event){
					console.log("player onClick");
				}
			}));
			
			var camera = new BI.core.Camera(cameraWidth, cameraHeight, 0, 0);
			var scene = new BI.core.Scene(sceneWidth, sceneHeight);
			scene.addLayer(layer);
		    var eventManager = new BI.core.EventManager();
			var renderer = new BI.core.Renderer(context, scene, camera, eventManager);
			
			canvas.addEvent('click', function(event){
				var position = canvas.getPosition();
				eventManager.onClick({x: (event.page.x - position.x), y: (event.page.y - position.y)});
			});
			
			canvas.addEvent('mousemove', function(event){
				var position = canvas.getPosition();
				eventManager.onMouseOver({x: (event.page.x - position.x), y: (event.page.y - position.y)});
			});
			
			engineContext.runInAnimLoop(function(){
				renderer.update();
			});
			
		}
	});

});